import { Flex, Form, Select, DatePicker, Button, Table, Pagination } from 'antd';
import style from '../css/Schedulinginquiry.module.scss'
import { SearchOutlined, UploadOutlined, } from '@ant-design/icons';
import { TableProps } from 'antd/lib';
import { useState } from 'react';
import { exportDataToExcel } from '../components/exportToExcel'

function Schedulinginquiry() {
    const [form] = Form.useForm();
    const { RangePicker } = DatePicker;
    // 表格数据
    interface DataType {
        key: string;
        Schedulingcode: string;
        depart: string;
        doctor: string;
        date: string;
        periodtime: string;
        consultingnum: string;
        consultingroom: string;
        type: string;
        mount: Number;
        money: string;
        status: string;
        mounted: Number
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '排班编码',
            dataIndex: 'Schedulingcode',
            key: 'Schedulingcode',
            width: '125px'
        },
        {
            title: '排班科室',
            dataIndex: 'depart',
            key: 'depart',
            width: '125px'
        },
        {
            title: '排班医生',
            dataIndex: 'doctor',
            key: 'doctor',
            width: '110px'
        },
        {
            title: '排班日期',
            key: 'date',
            dataIndex: 'date',
            width: '149px'
        },
        {
            title: '排班时段',
            key: 'periodtime',
            dataIndex: 'periodtime',
            width: '149px'
        },
        {
            title: '排班诊室编码',
            key: 'consultingnum',
            dataIndex: 'consultingnum',
            width: '111px'
        },
        {
            title: '排班诊室',
            key: 'consultingroom',
            dataIndex: 'consultingroom',
            width: '133px'
        },
        {
            title: '挂号种类',
            key: 'type',
            dataIndex: 'type',
            width: '133px'
        },
        {
            title: '号源数量',
            key: 'mount',
            dataIndex: 'mount',
            width: '95px'
        },
        {
            title: '号源金额',
            key: 'money',
            dataIndex: 'money',
            width: '100px'
        },
        {
            title: '排班状态',
            key: 'status',
            dataIndex: 'status',
            width: '100px',
            render: (text) => (
                text == '正常' ?
                    <p style={{ color: '#00a76f' }}>{text}</p>
                    :
                    <p style={{ color: '#fa6a1c' }}>{text}</p>
            )
        },
        {
            title: '已约数量',
            key: 'mounted',
            dataIndex: 'mounted',
            width: '95px'
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '正常',
            mounted: 5
        },
        {
            key: '2',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '正常',
            mounted: 5
        },
        {
            key: '3',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '正常',
            mounted: 5
        },
        {
            key: '4',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '正常',
            mounted: 5
        },
        {
            key: '5',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '正常',
            mounted: 5
        },
        {
            key: '6',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '正常',
            mounted: 5
        },
        {
            key: '7',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '停诊',
            mounted: 5
        },
        {
            key: '8',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '正常',
            mounted: 5
        },
        {
            key: '9',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '停诊',
            mounted: 5
        },
        {
            key: '10',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '正常',
            mounted: 5
        },
        {
            key: '11',
            Schedulingcode: '20240708001',
            depart: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingnum: '101',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 20,
            money: '200.00',
            status: '正常',
            mounted: 5
        },
    ];
    // 排班医生数据
    const [people] = useState([
        {
            value:'全部',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生all', label: '李医生all' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value: '门诊外科',
            doctor: [
                { value: '全部', label: '全部' },
                { value: '李医生1', label: '李医生1' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value: '门诊内科',
            doctor: [
                { value: '全部', label: '全部' },
                { value: '李医生2', label: '李医生2' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value: '骨科',
            doctor: [
                { value: '全部', label: '全部' },
                { value: '李医生20', label: '李医生20' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value: '耳鼻喉科',
            doctor: [
                { value: '全部', label: '全部' },
                { value: '李医生4', label: '李医生4' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value: '心内科',
            doctor: [
                { value: '全部', label: '全部' },
                { value: '李医生5', label: '李医生5' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value: '皮肤科',
            doctor: [
                { value: '全部', label: '全部' },
                { value: '李医生6', label: '李医生6' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value: '中医科1',
            doctor: [
                { value: '全部', label: '全部' },
                { value: '李医生7', label: '李医生7' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value: '中医科2',
            doctor: [
                { value: '全部', label: '全部' },
                { value: '李医生8', label: '李医生8' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value: '中医科3',
            doctor: [
                { value: '全部', label: '全部' },
                { value: '李医生9', label: '李医生9' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value: '中医科4',
            doctor: [
                { value: '全部', label: '全部' },
                { value: '李医生10', label: '李医生10' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
    ])
    const [option,setOption] = useState(0)
    const setoption=(value:string)=>{
        console.log(people.findIndex(person => person.value === value))
        setOption(people.findIndex(person => person.value === value))
    }
    // 搜索
    const getdata = () => {
        // 获取表单内数据
        form.validateFields().then(values => {
            console.log('Validated form values:', values);
        }).catch(errorInfo => {
            console.log('Validate Failed:', errorInfo);
        });
    }
    // 重置
    const reset=()=>{
        console.log('重置')
        form.resetFields()
    }
    // 导出
    const exports=  ()=>{
        console.log('导出')
        exportDataToExcel(data,'Schedulinginquiry.xlsx')
    }
    return (
        <>
            <div className={style.searchboxs}>
                <Form
                    form={form}
                    initialValues={{ depart: '全部', doctor: '全部', status: '全部状态' }}
                >
                    <Flex>
                        <Form.Item rules={[{required:true}]} label='排班科室' name='depart' className={style.itemstyle}>
                            <Select
                                onChange={setoption}
                                style={{ width: 200, height: 32 }}
                                options={people}
                            />
                        </Form.Item>
                        <Form.Item rules={[{required:true}]} label='排班医生' name='doctor' className={style.itemstyle}>
                            <Select
                                style={{ width: 200, height: 32 }}
                                options={people[option].doctor}
                            />
                        </Form.Item>
                        <Form.Item rules={[{required:true}]} label='排班状态' name='status' className={style.itemstyle}>
                            <Select
                                style={{ width: 200, height: 32 }}
                                options={[
                                    { value: '全部状态', label: '全部状态' },
                                    { value: '正常', label: '正常' },
                                    { value: '停诊', label: '停诊' },
                                ]}
                            />
                        </Form.Item>
                    </Flex>
                    <Flex style={{ width: '100%' }} justify='space-between'>
                        <Form.Item rules={[{required:true}]} label='排班日期' name='date' className={style.itemstyle}>
                            <RangePicker style={{ width: 305, height: 32 }} />
                        </Form.Item>
                        <div className={style.buttonbox}>
                            <Button style={{
                                width: 61,
                                height: 32,
                                marginRight: 10
                            }}
                            onClick={()=>reset()}
                            >重置</Button>
                            <Button style={{
                                width: 75,
                                height: 32
                            }} type="primary" onClick={getdata} icon={<SearchOutlined />}>
                                搜索
                            </Button>
                        </div>
                    </Flex>
                </Form>
            </div>
            <div className={style.datalists}>
                <Flex justify='flex-end' style={{ width: '100%' }}>
                    <Button style={{
                        color: '#0460ff',
                        borderColor: '#0460ff',
                        width: 75,
                        height: 32,
                        borderRadius: 0
                    }} onClick={()=>exports()} icon={<UploadOutlined />}>导出</Button>
                </Flex>
                <Table<DataType> className={style.tabledata} columns={columns} scroll={{ x: 'max-content' }} pagination={false} dataSource={data} />
                <Pagination style={{ marginTop: 20 }} showQuickJumper defaultCurrent={2} total={300} showTotal={(total) => `共 ${total} 条数据`} align="end" />
            </div>
        </>
    );
}

export default Schedulinginquiry;